<template>
  <div class="app-container app-containerMoneytabel">
    <div class="filter-container">
      <region-selector size="small" :disabled="view" :province="region.province" :city="region.city" :area="region.area"
        :street="region.street" :community="region.community" :hideProvince="region.city!==0" :hideCity="region.area!==0"
        :hideArea="region.street!==0 || region.area!==0"  @region="setAreaCode">
      </region-selector>
      <el-select size="small" style="margin-right:15px;" v-model="listQuery.householdType" placeholder="请选择户口类别">
        <el-option v-for="item in options['householdType']" :value="item.value" :label="item.label" :key="item.value"></el-option>
      </el-select>
      <el-select size="small" style="margin-right:15px;" v-model="listQuery.status" placeholder="请选择状态">
        <el-option v-for="item in options['approvalStatus']" :value="item.value" :label="item.label" :key="item.value"></el-option>
      </el-select>
      <el-date-picker size="small" v-model="listQuery.queryTime" type="daterange" value-format="timestamp" range-separator="-" start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button size="small" class="filter-item filter-itemBut" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-row class="filter-container-option" style="margin-bottom: 15px;">
      <div style="margin-right: 15px;" :span="1">
        <el-button size="small" type="warning" @click="handleExportExcel" plain>导出</el-button>
      </div>
      <div style="margin-right: 15px;" :span="1">
        <el-button size="small" type="primary" @click="printPress(1)" plain>打印</el-button>
      </div>
      <div :span="1">
        <el-button size="small" type="success" @click="handleGive" plain>发放</el-button>
      </div>
    </el-row>
    <el-table :data="list" v-loading="listLoading" element-loading-text="Loading"
      @selection-change="handleSelectionChange"
      border fit highlight-current-row>
      <el-table-column 
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column label="学生姓名" align="center" >
        <template slot-scope="scope">
          {{scope.row.approvalUserName}}
        </template>
      </el-table-column>
      <el-table-column label="行政区域" align="center" >
        <template slot-scope="scope">
          {{scope.row.areaName}}
        </template>
      </el-table-column>
      <el-table-column label="家庭住址" align="center" >
        <template slot-scope="scope">
          {{scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" >
        <template slot-scope="scope">
          {{scope.row.sex}}
        </template>
      </el-table-column>
      <el-table-column label="录取学校" align="center" width="100">
        <template slot-scope="scope">
          {{scope.row.school}}
        </template>
      </el-table-column>
      <el-table-column label="高考成绩" align="center">
        <template slot-scope="scope">
          {{scope.row.score}}
        </template>
      </el-table-column>
      <el-table-column label="学历层次" align="center" >
        <template slot-scope="scope">
          {{scope.row.schoolType | mapLabel('schoolType')}}
        </template>
      </el-table-column>
      <el-table-column label="资助对象家庭类别" width="140" align="center">
        <template slot-scope="scope">
          {{scope.row.supportType | mapLabel('supportType')}}
        </template>
      </el-table-column>
      <el-table-column label="领取人姓名" align="center" >
        <template slot-scope="scope">
          {{scope.row.householder}}
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center" >
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.householderIdCard" placement="top-start">
            <p>{{scope.row.householderIdCard | idCardFun}}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="补助账户" align="center" width="120">
        <template slot-scope="scope">
          {{scope.row.account}}
        </template>
      </el-table-column>
      <el-table-column label="补助金额" align="center">
        <template slot-scope="scope">
          {{scope.row.money}}
        </template>
      </el-table-column>
      <el-table-column label="补助状态" align="center">
        <template slot-scope="scope">
          {{scope.row.status | mapLabel('approvalStatus')}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="教育救助" width="70%" :visible.sync="isexpressPrint">
      <div id="expressPrint">
        <expressPrint :list="multipleSelection"></expressPrint>
      </div>
      <div class="expressPrint_ft">
        <el-button type="primary" size="small" @click="printPress(2)" plain>确认打印</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导出数据项" :visible.sync="exportExcelDialog">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAllColumns" @change="handleCheckAllColumnsChange">全选</el-checkbox>
      <el-checkbox  v-model="listQuery.xlsx">是否导出xlsx</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="listQuery.columns" @change="handleCheckColumnsChange">
        <el-checkbox v-for="column in exportColumns" :label="column.value" :checked="column.checked" :key="column.value">{{column.label}}</el-checkbox>
      </el-checkbox-group>
      <div class="expressPrint_ft">
        <el-button type="primary" size="small" @click="exportExcel" plain>确认导出</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryES, esGive } from "@/api/bizQuery";
import RegionSelector from "@/components/RegionSelector";
import expressPrint from "./module/expressPrint";
import { getToken } from "@/utils/auth";

export default {
  components: {
    RegionSelector,
    expressPrint
  },
  data() {
    return {
      options: this.$store.state.dict.options,
      isexpressPrint: false,
      list: null,
      total: 0,
      listLoading: true,
      exportExcelUrl:
        process.env.BASE_API + "/educational-support/search/export",
      multipleSelection: [],
      listQuery: {
        page: 1,
        size: 10,
        areaCode: null,
        status: null,
        startTime: null,
        endTime: null,
        queryTime: [],
        columns: [],
        xlsx: true,
        householdType: null,
        sort: "+id"
      },
      exportExcelDialog: false,
      isIndeterminate: true,
      checkAllColumns: false,
      exportColumns: [
        { label: "学生姓名", value: "approvalUserName" },
        { label: "行政区域", value: "areaCode" },
        { label: "家庭住址", value: "address" },
        { label: "性别", value: "sex" },
        { label: "录取学校", value: "school" },
        { label: "高考成绩", value: "score" },
        { label: "学历层次", value: "schoolType" },
        { label: "资助对象家庭类别", value: "supportType" },
        { label: "领取人姓名", value: "householder" },
        { label: "身份证号", value: "householderIdCard" },
        { label: "补助账户", value: "account" },
        { label: "补助金额", value: "money" },
        { label: "补助状态", value: "status" }
      ],
      region: this.$store.state.user.region
    };
  },
  mounted: function() {
    this.fetchData();
  },
  methods: {
    printPress(i) {
      if (this.multipleSelection.length > 0) {
        if (i == 1) {
          this.isexpressPrint = true;
        } else if (i == 2) {
          if (getLodop()) {
            this.CreateOneFormPage();
          }
        } else {
          this.isexpressPrint = false;
        }
      } else {
        this.$message({
          message: "请选择打印内容",
          type: "info"
        });
      }
    },
    CreateOneFormPage() {
      let LODOP = "";
      LODOP = getLodop();
      LODOP.PRINT_INIT("教育救助");
      LODOP.SET_PRINT_STYLE("FontSize", 16);
      LODOP.SET_PRINT_PAGESIZE(3);
      LODOP.ADD_PRINT_HTM(
        "0",
        "0",
        "100%",
        "100%",
        document.getElementById("expressPrint").innerHTML
      );
      LODOP.PREVIEW();
    },
    fetchData() {
      this.listLoading = true;
      queryES(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
      this.listLoading = false;
    },
    handleFilter() {
      if (this.listQuery.queryTime.length > 1) {
        this.listQuery.startTime = this.listQuery.queryTime[0] / 1000;
        this.listQuery.endTime = this.listQuery.queryTime[1] / 1000;
      }
      this.listQuery.page = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      if (this.listQuery.queryTime.length > 1) {
        this.listQuery.startTime = this.listQuery.queryTime[0] / 1000;
        this.listQuery.endTime = this.listQuery.queryTime[1] / 1000;
      }
      this.listQuery.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      if (this.listQuery.queryTime.length > 1) {
        this.listQuery.startTime = this.listQuery.queryTime[0] / 1000;
        this.listQuery.endTime = this.listQuery.queryTime[1] / 1000;
      }
      this.listQuery.page = val;
      this.fetchData();
    },
    setAreaCode(value) {
      if (value.code) {
        this.listQuery.areaCode = value.code;
      }
    },
    handleGive() {
      if(this.list.length===0){
        this.$message.warning('未选中人员')
        return
      }
      esGive(this.listQuery).then(() => {
        this.fetchData()
        this.$notify({
          title: "成功",
          message: "发放成功",
          type: "success",
          duration: 2000
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleExportExcel() {
      //this.listQuery.columns = [];
      this.exportExcelDialog = true;
    },
    handleCheckAllColumnsChange(val) {
      if (val) {
        this.exportColumns.forEach(e => {
          e.checked = true;
          this.listQuery.columns.push(e.value);
        });
      } else {
        this.exportColumns.forEach(e => {
          e.checked = false;
        });
        this.listQuery.columns = [];
      }
      this.isIndeterminate = false;
    },
    handleCheckColumnsChange(value) {
      let checkedCount = value.length;
      this.checkAllColumns = checkedCount === this.exportColumns.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.exportColumns.length;
    },
    exportExcel() {
      let url = this.exportExcelUrl + "?X-Token=" + getToken();
      url += this.joinQueryCondition();
      window.open(url);
    },
    joinQueryCondition() {
      let condition = "";
      if (this.listQuery.areaCode) {
        condition += "&areaCode=" + this.listQuery.areaCode;
      }
      if (this.listQuery.startTime) {
        condition += "&startTime=" + this.listQuery.startTime;
      }
      if (this.listQuery.endTime) {
        condition += "&endTime=" + this.listQuery.endTime;
      }
      if (this.listQuery.householdType) {
        condition += "&householdType=" + this.listQuery.householdType;
      }
      condition += "&xlsx=" + this.listQuery.xlsx;
      if (this.listQuery.columns.length > 0) {
        condition += "&columns=" + this.listQuery.columns.join(",");
      }
      return condition;
    }
  }
};
</script>

<style scoped>
.expressPrint_ft {
  height: 90px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 45px;
}

.expressPrint_title {
  height: 80px;
  width: 100%;
}

.expressPrint_main {
  /* width: 900px; */
  height: 680px;
  overflow: hidden;
  border-radius: 5px;
  background-color: #fff;
}

#expressPrint {
  /* width: 850px; */
  height: 500px;
  background-color: #fff;
  overflow: scroll;
  margin-left: 25px;
  border: 1px solid #ccc;
}

.expressPrint_box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2008;
}

/* 打印 */
.filter-container {
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.filter-container-option {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 15px;
}
.pagination-container {
  margin-top: 25px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

.filter-itemBut {
  margin-left: 25px;
}
</style>